<template>
  <div>
    <el-form ref="form" :model="form" size="mini" label-width="80px">
      <el-row>
        <el-col :span="11">
          <el-form-item label="订单号">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="书名">
            <el-input v-model="form.bookName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="11">
          <el-form-item label="订单日期">
            <el-col :span="10">
              <el-date-picker type="date" placeholder="选择日期"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"
                              v-model="form.startDate"
                              style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">至</el-col>
            <el-col :span="10">
              <el-date-picker type="date" placeholder="选择日期"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"
                              v-model="form.endDate"
                              style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="发货单号">
            <el-input v-model="form.expressOrder"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" style="margin-left: 407px">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import {mapState} from "vuex";

export default {
  props:{
    state:0
  },
  data() {
    return {
      form: {
        id: '',
        bookName: '',
        startDate: '',
        endDate: '',
        expressOrder: '',
        state:''
      }
    }
  },
  methods: {
    //发送多条件查询订单的请求
    onSubmit() {
      let data = this.form
      data.state = this.state
      console.log(data)
      axios.post( "/order/multiCondition/"+ this.userId, data)
          .then(r => {
            this.$emit('updateTableDate',r.data.data)
          }).catch(e => {
        console.log(e)
      })
    },
    resetForm() {
      this.form = {}
    },
  },
  computed:{
    ...mapState(["userId"])
  }
}
</script>

<style scoped>

</style>